<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chromatic竞赛信息管理系统</title>
  <link rel="icon" type="image/png" href="images/chromatic_logo.png">

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
    }
    .navbar {
      background-color:#333;
      display: flex;
      justify-content:right;
      align-items: center;
      padding: 10px;
    }
    .navbar a {
      color: #fff;
      text-decoration: none;
      float: right;
      margin-right: 20px;
      font-size: large;
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }
    .container {
      margin: 20px;
    }
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .website-title {
      font-size: 24px;
      font-weight: bold;
      margin-right: 20px;
    }

    .form-container {
      margin-top: 20px;
    }

    .form-input {
      margin-bottom: 10px;
      width: 300px;
      padding: 5px;
    }

    .form-button {
      padding: 5px 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }

    .competition-list {
      margin-top: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
<nav class="navbar" id="video-title">
  <a id="logoutBtn" href="/admin_login.html">退出登录</a>
</nav>
<div class="container">
<div class="header">
  <div class="logo-container">
    <img src="images/chromatic_logo.png" style="width: 100px;height: 100px" alt="chromatic logo">
  </div>
  <div class="website-title">Chromatic竞赛信息管理系统</div>
</div>

<div class="form-container">
  <h2>添加竞赛信息</h2>
  <label for="subject"></label>
  <select id="subject" class="form-input" required>
    <option value="">请选择学科</option>
    <option value="工科类">工科类</option>
    <option value="理科类">理科类</option>
    <option value="文科类">文体类</option>
    <option value="商科类">商科类</option>
    <option value="综合类">综合类</option>
    <option value="其他">其他</option>
  </select>
  <label for="category"></label><input type="text" id="category" class="form-input" placeholder="类别" required>
  <label for="competitionName"></label><input type="text" id="competitionName" class="form-input" placeholder="竞赛名称" required>
  <label for="officialWebsite"></label><input type="text" id="officialWebsite" class="form-input" placeholder="官方网站" required>
  <label for="level"></label>
  <select id="level" class="form-input" required>
    <option value="">请选择级别</option>
    <option value="国际级">国际级</option>
    <option value="国家级">国家级</option>
    <option value="省级">省级</option>
    <option value="校级">校级</option>
  </select>
  <label for="identifiedBy"></label><input type="text" id="identifiedBy" class="form-input" placeholder="已认定学校（先不填）" required>
  <button onclick="saveCompetition()" class="form-button">保存竞赛信息</button>
</div>

<div class="competition-list">
  <h2>所有竞赛信息</h2>
  <ul id="competitionsList"></ul>
</div>
</div>
<script>
  const user = JSON.parse(localStorage.getItem('user'));
  const token = localStorage.getItem('token');
  const editor_name = user.username;
  // const editor_name = "chromatic_admin";
  if (!user) {
    // 用户未登录，跳转到登录页面
    window.location.href = 'admin_login.html';
  }

  const logoutBtn = document.getElementById('logoutBtn');
  logoutBtn.addEventListener('click', function() {
    localStorage.removeItem('user');
    localStorage.removeItem('token'); // 清除本地存储中的 token
  });
  function saveCompetition() {
    const subject = document.getElementById('subject').value;
    const category = document.getElementById('category').value;
    const competitionName = document.getElementById('competitionName').value;
    const officialWebsite = document.getElementById('officialWebsite').value;
    const level = document.getElementById('level').value;
    // const identifiedBy = document.getElementById('identifiedBy').value;
    const identifiedBy = ["福州大学"];
    const competition = {
      subject: subject,
      category: category,
      competition_name: competitionName,
      official_website: officialWebsite,
      level:level,
      // identified_by: identifiedBy.split(','),
      identified_by: identifiedBy,
      editor: editor_name
    };

    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          clearForm();
          getAllCompetitions();
        } else {
          console.error('保存竞赛信息失败！');
        }
      }
    };
    console.log(subject + category + competitionName + officialWebsite + level + identifiedBy + editor_name);
    xhr.open('POST', '/api/competitions_list/save', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(competition));
    alert("竞赛信息保存成功！");
  }

  function getAllCompetitions() {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          const competitions = JSON.parse(xhr.responseText);
          renderCompetitions(competitions);
        } else {
          console.error('获取竞赛信息失败！');
        }
      }
    };

    xhr.open('GET', '/api/competitions_list/getAll', true);
    xhr.send();
  }

  function renderCompetitions(competitions) {
    const competitionsList = document.getElementById('competitionsList');
    competitionsList.innerHTML = '';

    competitions.forEach(function (competition) {
      const competitionItem = document.createElement('li');
      competitionItem.innerText = `ID: ${competition.id} - ${competition.subject} - ${competition.category} - ${competition.competition_name} - ${competition.official_website} - ${competition.level} - ${competition.identified_by? competition.identified_by.join(', ') : ''} - ${competition.editor}` ;
      competitionsList.appendChild(competitionItem);
    });
  }

  function clearForm() {
    document.getElementById('subject').value = '';
    document.getElementById('category').value = '';
    document.getElementById('competitionName').value = '';
    document.getElementById('officialWebsite').value = '';
    document.getElementById('level').value = '';
    document.getElementById('identifiedBy').value = '';
  }

  // 初始化页面时获取所有竞赛信息
  getAllCompetitions();
</script>
</body>
</html>